<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>评委投票页</title>
    <script type="text/javascript" th:src="@{/source/js/jquery.min.js}" src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            setInterval(function () {
                $.ajax({
                    url: '/getLatestPK', // 向后端发送请求的URL
                    method: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        $('#data-groupId').text(data.groupId).val(data.groupId);
                        $('#data-usernameA').text(data.usernameA);
                        $('#data-photoA').attr('src', '/source/uploadfiles/' + data.photoA).siblings('input[type="hidden"]').val(data.userAId).data('groupId', data.groupId);
                        $('#data-photoB').attr('src', '/source/uploadfiles/' + data.photoB).siblings('input[type="hidden"]').val(data.userBId).data('groupId', data.groupId);
                        $('#data-usernameB').text(data.usernameB);
                    },
                    error: function () {
                        console.log('投票未开始！');
                    }
                });
            }, 2000); // 每2秒钟发送一次请求

            $('#data-photoA').hover(function () {
                $(this).addClass('shake');
            }, function () {
                $(this).removeClass('shake');
            });

            $('#data-photoB').hover(function () {
                $(this).addClass('shake');
            }, function () {
                $(this).removeClass('shake');
            });

            $('#data-photoA').click(function () {
                var userAId = $(this).siblings('input[type="hidden"]').val();
                var groupId = $(this).siblings('input[type="hidden"]').data('groupId');
                $.ajax({
                    url: '/getScores',
                    method: 'GET',
                    data: {userId: userAId, groupId: groupId},
                    success: function () {
                        showSuccessMessage();
                        showImage($(this));
                    }.bind($(this)),
                    error: function () {
                        console.log('投票未开始！');
                    }
                });
            });

            $('#data-photoB').click(function () {
                var userBId = $(this).siblings('input[type="hidden"]').val();
                var groupId = $(this).siblings('input[type="hidden"]').data('groupId');
                $.ajax({
                    url: '/getScores',
                    method: 'GET',
                    data: {userId: userBId, groupId: groupId},
                    success: function () {
                        showSuccessMessage();
                        showImage($(this));
                    }.bind($(this)),
                    error: function () {
                        console.log('投票未开始！');
                    }
                });
            });
        });

        function showImage(image) {
            // 隐藏表格
            $('#data-table').hide();
            // 将被点击的图片移动到屏幕中央
            var clonedImage = image.clone().addClass('selected-image');
            $('body').append(clonedImage);
            clonedImage.css('position', 'absolute').css('top', '50%').css('left', '50%').css('transform', 'translate(-50%, -50%)');
            // 显示返回按钮
            // $('<button>').addClass('back-button').text('返回').appendTo('body').click(function () {
            //     // 显示表格
            //     $('#data-table').show();
            //     // 隐藏被点击的图片和返回按钮
            //     clonedImage.remove();
            //     $(this).remove();
            // });
        }

        function showSuccessMessage() {
            $('#vote-result').text('投票成功！');
            $('#vote-result').show();
        }
    </script>
    <style>
        table {
            margin: 0 auto;
            text-align: center;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        .photo-wrapper {
            display: flex;
            justify-content: center;
        }
        #vote-result {
            display: none;
            position: fixed;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4em;
            font-weight: bold;
            color: #2ecc71;
            text-shadow: 2px 2px 0 #f5f6fa, 4px 4px 0 #33cabb;
        }

        /* 新增样式 */
        .shake {
            animation: shake 0.5s;
            animation-iteration-count: infinite;
        }

        @keyframes shake {
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(-10px);
            }

            100% {
                transform: translateX(10px);
            }
        }

        .selected-image {
            z-index: 999;
            max-height: 90vh;
            max-width: 90vw;
        }

        .back-button {
            position: fixed;
            top: 20px;
            left: 20px;
            font-size: 1.5em;
            padding: 10px 20px;
            border-radius: 5px;
            background-color: #2ecc71;
            color: white;
            cursor: pointer;
            border: none;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
<h1><span sec:authorize="hasRole('0')">[管理员]</span>
    <span sec:authorize="hasRole('1')">[工作人员]</span>
    <span sec:authorize="hasRole('2')">[评委]</span>
    <span sec:authentication="principal.username"></span>
</h1>
<h2 style="text-align: center;">选手图片出现即可开始投票！</h2>
<h2 style="text-align: center;">点击要投票的选手图片！</h2>
<div id="vote-result"></div>
<input id="data-groupId" type="hidden" name="groupId" value="">
<table id="data-table">
    <thead>
    <tr>
        <th>选手A</th>
        <th></th>
        <th>选手B</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <div class="photo-wrapper">
                <img id="data-photoA" class="photo" src="" alt="">
                <input type="hidden" name="userAId" value="">
            </div>
        </td>
        <td>VS</td>
        <td>
            <div class="photo-wrapper">
                <img id="data-photoB" class="photo" src="" alt="">
                <input type="hidden" name="userBId" value="">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <span id="data-usernameA" name="data-usernameA"></span>
            </div>
        </td>
        <td>  </td>
        <td>
            <div>
                <span id="data-usernameB" name="data-usernameB"></span>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>